<template>
	<div>
		<recommend-adress></recommend-adress>
		<div class="recommend-title">热销推荐</div>
		<ul>
			<router-link 
				tag="li" 
				class="item border-bottom" 
				v-for="(item,index) in recommendList" 
				:key="item.id" 
				:to="'/detail/'+item.id"
			>
				<div class="item-img-wrap">
					<img :src="item.imgUrl" class="item-img">
				</div>
				<div class="item-info">
					<div class="item-title">{{item.title}}</div>
					<div class="item-desc">{{item.desc}}</div>
					<div class="item-button">查看详情</div>
				</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import Adress from '../subcomponents/Adress.vue'
	export default{
		components:{
			recommendAdress:Adress
		},
		data(){
			return{
			}
		},
		computed:{
			...mapGetters(['recommendList'])
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../assets/styles/mixins.styl' 
	.recommend-title
		line-height :0.7rem
		background :#eee
		text-indent :0.2rem
	.item
		overflow :hidden
		display :flex
		// background-color :red
		.item-img-wrap
			flex 1
			overflow hidden
			img
				width :100%
				height auto
				padding :0.1rem
		.item-info
			flex 3
			// background :yellow
			margin :0.1rem 0
			box-sizing border-box
			padding-right 1rem
			padding-left 0.2rem
			overflow hidden
			.item-title
				line-height :.54rem
				font-size :0.32rem
				ellipsis()
			.item-desc
				line-height :.4rem
				color :#ccc
				ellipsis()
			.item-button
				line-height :.44rem
				margin-top :.2rem
				background :#ff9300
				padding:0 .2rem
				border-radius :0.1rem
				color:#fff
				width :1.2rem
				text-align center
</style>
